import React, { Component } from 'react'
import './index.css';
import Header from '../header';
import Main from '../main';
import Footer from '../footer';
import {nanoid} from 'nanoid';
export default class index extends Component {
    state = {
        data: [
            { id: 1, title: '吃饭', done: false },
            { id: 2, title: '吃饭', done: false },
            { id: 3, title: '吃饭', done: true }
        ]
    }
    render() {
        let { data } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header changeDate={this.change} />
                    <Main data={data}
                        statueChange={this.statueChange}
                        delete={this.deleteData} />
                    <Footer checkedAll={this.checkedAll}
                        data={data}
                        cleardata={this.cleardata} />
                </div>
            </div>
        )
    }
    change = (title) => {
        let { data } = this.state;
        let obj = {
            id: nanoid(),
            title: title,
            done: false
        }
        let newArr = [...data, obj];
        this.setState({
            data: newArr
        })
    }
    statueChange = (id, status) => {
        let { data } = this.state;
        for (let i = 0; i <= data.length - 1; i++) {
            if (id === data[i].id) {
                data[i].done = status;
            }
        }
        this.setState({
            data: data
        })
    }
    deleteData = (id) => {
        let { data } = this.state;
        let newArr = [];
        for (let i = 0; i <= data.length - 1; i++) {
            if (id !== data[i].id) newArr.push(data[i])
        }
        this.setState({
            data: newArr
        })
    }
    checkedAll = (status) => {
        let { data } = this.state;
        let newArr = data.map(item => {
            item.done = status;
            return item;
        })
        this.setState({
            data: newArr
        })
    }
    cleardata = () => {
        let {data} = this.state;
        let newArr = data.filter(item=> !item.done);
        this.setState({
            data:newArr
        })
    }
}
